<template>
    <div class="ruzhujigou">
        <PublicHead></PublicHead>
        <div class="ruzhu">
            <div class="ruzhuBox">

                <div class="title">
                    <div>个人中心</div>
                    <div>/&ensp;GERENZHONGXIN</div>
                </div>
                <div class="tab">
                    <el-menu class="el-menu-demo" mode="horizontal" :default-active="activeIndex">
                        <el-menu-item index="1" @click="toDetai(0)"
                            :class="{ 'active-menu': currentMenu === 'qydetail' }">企业认证详情</el-menu-item>
                        <el-menu-item index="2" @click="toDetai(1)"
                            :class="{ 'active-menu': currentMenu === 'ptlist' }">我的申报详情</el-menu-item>
                        <el-menu-item index="4" @click="toDetai(3)"
                            :class="{ 'active-menu': currentMenu === 'nsdetail' }">年审详情</el-menu-item>
                    </el-menu>
                </div>
                <router-view></router-view>

                <div>

                </div>
            </div>
        </div>
        <PublicFoot></PublicFoot>
    </div>
</template>
  
<script>
import PublicHead from '../components/PublicHead.vue'
import PublicFoot from '../components/PublicFoot.vue'
import { pingtai_Count, shenbao_list, shifan_detail } from '../api/api'
export default {
    data() {
        return {
            tableData: [],
            ptList: [],
            DialogVisible: false,
            state: {
                type: '',
                level: '',
                status: ''
            },
            activeIndex: '1',
            currentMenu :null
        };
    },

    methods: {
        openDetail(row) {
            console.log(row);
            this.state.type = row.applicationType
            this.state.level = row.applicationLevel
            this.state.status = row.pprovalStatus
            this.DialogVisible = true
        },
        //根据当前状态
        toDetai(num) {
            if (num == '0') {
                this.$router.push('/gerenCenter/qydetail');
            } else if (num == '1') {
                this.$router.push('/gerenCenter/ptlist');
            } else if (num == '3') {
                this.$router.push('/gerenCenter/nsdetail');
            }

        },
        setCurrentMenu() {
            // 根据当前页面的路径或其他条件，设置currentMenu
            // 例如，如果当前路径是 '/about'，则设置 currentMenu 为 'about'
            // 如果使用 Vue Router，你可以通过 $route 对象来获取当前路径
            const currentPath = this.$route.path;

            // 根据当前路径设置 currentMenu
            if (currentPath === '/gerenCenter/qydetail') {
                this.activeIndex = '1';
            } else if (currentPath === '/gerenCenter/ptlist') {
                this.activeIndex = '2';
            } else if (currentPath === '/gerenCenter/nsdetail') {
                this.activeIndex = '4';
            }
        },
    },
    created() {
        shenbao_list({ userId: this.$store.state.userId }).then((res) => {
            console.log(res.data.data);
            this.ptList = res.data.data
        })
        pingtai_Count({ userId: this.$store.state.userId, type: '0' }).then((res) => {
            if (res.data.state == '20000') {
                this.$store.commit('setptState', res.data.data.pprovalStatus)
                localStorage.setItem('pingtaitype', res.data.data.applicationType)
                localStorage.setItem('pingtaistate', res.data.data.pprovalStatus)
            }
        })
        pingtai_Count({ userId: this.$store.state.userId, type: '1' }).then((res) => {
            if (res.data.state == '20000') {
                this.$store.commit('setjdtState', res.data.data.pprovalStatus)
                localStorage.setItem('jiditype', res.data.data.applicationType)
                localStorage.setItem('jidistate', res.data.data.pprovalStatus)
            }
        })
        pingtai_Count({ userId: this.$store.state.userId, type: '2' }).then((res) => {
            if (res.data.state == '20000') {
                console.log(res.data.state, '111');
                this.$store.commit('setrzState', res.data.data.pprovalStatus)
                localStorage.setItem('jigoutype', res.data.data.applicationType)
                localStorage.setItem('jigoustate', res.data.data.pprovalStatus)
            }
        })
    },
    mounted() {
        this.setCurrentMenu();
    },
    filters: {
        flitt(name) {
            return name.slice(0, 10)
        }
    },
    components: {
        PublicHead,
        PublicFoot,

    }
}
</script>
  
<style  lang="scss" scoped>
.active-menu {
    border-bottom: 2px solid red;
    /* 设置菜单项的下边框样式，这里使用红色示例 */
}

.tab {
    margin-bottom: 20px;
}

.selectBox {
    margin: 20px 0px;
}

.el-select .el-input__inner {
    width: 200px;
}

.el-input {
    width: 400px;
}

.el-select {
    width: 200px !important;

}

.zhizhao {
    width: 800px;
    height: 14px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #D50000;
    margin: 10px;
}

.ruzhu {
    width: 100%;
    display: flex;
    justify-content: center;

    .ruzhuBox {
        width: 1220px;
        min-height: 1220px;
        height: 100%;
        background: #FFFFFF;
        margin: 30px;
    }
}

.ruzhuBox {
    width: 1220px;
    height: 100%;
    background: #FFFFFF;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 10px 50px;

    .title {
        display: flex;

        div:nth-of-type(1) {
            width: 80px;
            height: 50px;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #262626;
            line-height: 50px;
            margin-bottom: 20px;
            border-bottom: 4px #1285D7 solid;

        }

        div:nth-of-type(2) {
            height: 50px;
            font-size: 15px;
            font-family: Arial;
            font-weight: 400;
            color: #DCDCDC;
            line-height: 50px;
            margin-right: 5px;

            border-bottom: 4px #1285D7 solid;

        }

        div:nth-of-type(3) {
            width: 189px;
            height: 50px;
            font-size: 15px;
            font-family: Arial;
            font-weight: 400;
            color: #DCDCDC;
            line-height: 50px;

            border-bottom: 4px #1285D7 solid;

        }

    }

    .title2 {
        width: 150px;
        height: 40px;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #1285D7;
    }
}

.name {
    width: 208px;
    height: 45px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FD8544;
}

.text,
.iconDownload {
    height: 14px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #1285D7;
}

.el-table__header {
    background-color: #1285D7 !important;
    color: white;
}

::v-deep .el-table__header th.is-leaf,
::v-deep .el-table__header th.gutter {
    background-color: #1285D7 !important;
    color: white;
    font-size: 16px;
}

.status {
    width: 48px;
    height: 16px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #D62502;
}

.el-button--primary {
    background-color: #fd8544;
    border-color: #fd8544;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.tableFoot {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 50px;

    button {
        margin: 0px 10px;

        &:hover {
            cursor: pointer;
        }
    }

    button:nth-of-type(1) {
        width: 98px;
        height: 40px;
        background: #2797E8;
        border: 0;
        border-radius: 3px 3px 3px 3px;
        color: white;
    }

    button:nth-of-type(2) {
        width: 98px;
        height: 40px;
        background: #F39200;
        border-radius: 3px 3px 3px 3px;
        border: 0;

        color: white;
    }

    button:nth-of-type(3) {
        width: 98px;
        height: 40px;
        background: #FFFFFF;
        border-radius: 3px 3px 3px 3px;
        color: white;
        border: 0;
    }
}</style>